<template>
    <div>
        <div class="bac-container-none-padding">
            <div class="col-right-top">
                        <span class="top-title">
                            新关注你的用户
                        </span>
                <div class="top-operate">
                    <div v-if="!batch">
                        <span>
                           <el-checkbox v-model="params.isAll" true-label="1" false-label="0" @change="selectAll"
                                        label="显示已读" style="margin-right: 10px"></el-checkbox>
                        </span>
                        <span>
                            <el-button size="mini" @click="openBatch" type="primary">批量管理</el-button>
                        </span>
                    </div>

                    <span v-if="batch" class="batch-container">
                        <span>
                            <el-button size="mini" plain @click="updateBatchState">标记已读</el-button>
                        </span>
                        <span>
                            <el-button size="mini" plain @click="batchAll">全选</el-button>
                        </span>
                        <span>
                            <el-button size="mini" plain @click="openBatch">退出</el-button>
                        </span>
                        <span>
                            <el-button size="mini" plain @click="batchCancel">取消选择</el-button>
                        </span>
                        <span>
                            <el-link type="primary" :underline="false">已选{{batchList.length}}</el-link>
                        </span>

                    </span>
                </div>

            </div>
        </div>
        <!--列表-->
        <div class="bac-container" v-loading="loading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading">
            <ul class="message-list">
                <li v-for="(message,index) in messageList" :key="index" class="message-item">
                    <div class="message-avatar" @click="openUserHome(message.fromUserId)">
                        <el-avatar :size="40" :src="message.fromUserHeadUrl"></el-avatar>
                    </div>
                    <div class="message-data">
                        <div class="user-name" @click="openUserHome(message.fromUserId)"><span>{{message.fromUserRealName}}</span>&nbsp;
                            <el-tag type="danger" size="mini" effect="plain" v-if="message.fromUserType == 1">v</el-tag>
                        </div>
                        <div class="message-data-item message-context">
                            <el-link @click="openUserHome(message.fromUserId)">{{message.content}}
                            </el-link>
                        </div>
                        <div class="message-data-item message-time">
                            {{message.createTime | formatDate}}
                        </div>
                    </div>
                    <div class="message-right-data">
                        <el-button type="primary" size="mini" plain @click="updateState(message.id)"
                                   v-if="message.isRead == 0">标记已读
                        </el-button>
                        <el-button type="primary" size="mini" plain v-else icon="el-icon-check">
                            已读
                        </el-button>
                    </div>
                    <el-checkbox v-model="batchList" :label="message.id" v-if="batch"
                                 class="batch-checkbox"></el-checkbox>
                </li>

            </ul>
            <div v-if="messageList.length == 0" class="empty-message">
                <p>没有新关注，去发布动态让更多人看到您吧！</p>
                <el-button round size="small" @click="$router.push({path:'add-dynamic'})">去发布</el-button>
            </div>

        </div>

        <el-pagination
                @current-change="changPage"
                hide-on-single-page
                background
                layout="prev, pager, next"
                :page-size="params.size"
                :total="params.count">
        </el-pagination>
    </div>
</template>
<script>
    import {formatDate} from "@/utils/dateUtil"

    export default {
        filters: {
            formatDate(val) {
                return formatDate(val)
            }
        },
        data: function () {
            return {
                loading: false,
                batch: false,//批量管理
                batchList: [],
                messageList: [],
                params: {
                    page: 1,
                    size: 5,
                    type: 2
                }

            }
        },
        methods: {
            initData() {
                this.loading = true;
                this.$post("/user/message/queryPage", this.params).then((res) => {
                    this.messageList = res.data.rows;
                    this.params.count = res.data.count;
                    this.loading = false;
                }).catch(err => {
                    console.log(err)
                    this.loading = false;
                })
            },
            selectAll(val) {
                this.initData();
            },
            changPage(page) {
                this.params.page = page;
                this.initData();
            },
            openDynamicDetails(id, itemId) {
                this.$router.push({
                    path: "dynamic-details",
                    query: {id: id, itemId: itemId}
                })
            },
            openUserHome(userId) {
                this.$router.push({
                    path: "home",
                    query: {id: userId}
                })
            },
            openBatch() {
                this.batch = !this.batch
            },
            batchAll() {
                this.batchList = [];
                this.messageList.forEach(message => {
                    this.batchList.push(message.id)
                })
            },
            batchCancel() {
                this.batchList = [];
            },
            updateState(id) {
                this.$post("/user/message/updateState", {id: id}).then((res) => {
                    this.initData();
                }).catch(err => {
                    console.log(err)
                })
            },
            updateBatchState() {
                if (this.batchList.length == 0) {
                    this.$notify({
                        offset: 60,
                        title: '提示',
                        message: '请先选择',
                        type: 'error'
                    });
                    return;
                }
                this.$post("/user/message/updateList", {ids: this.batchList}).then((res) => {
                    this.initData();
                    this.$notify({
                        offset: 60,
                        title: '成功',
                        message: res.msg,
                        type: 'success'
                    });
                }).catch(err => {
                    console.log(err)
                })
            }
        },
        mounted() {
            this.initData();
        }
    }
</script>
<style>

</style>